<template>
    <div class="platform">
        <my-tag title="优惠券管理" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" label-position="left" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left-six">
                    <el-form-item label="优惠券名称" prop="schemeName">{{ form.schemeName }}</el-form-item>
                    <el-form-item label="使用说明" prop="designIdea">{{ form.designIdea }}</el-form-item>
                    <el-form-item label="适用角色" prop="couponFrom">{{ form.couponFrom }}</el-form-item>
                    <el-form-item label="适用范围">
                        <el-table v-loading="tableDataLoading" :data="tableData" style="margin:20px 0;" max-height="500">
                            <el-table-column prop="id" :label="`${name}ID`" align="center" :show-overflow-tooltip="true" />
                            <el-table-column :label="`${name}形象照`" align="center" width="110">
                                <template #default="scope">
                                    <image-preview :width="60" :height="60" :src="scope.row.figureImg"
                                        :preview-src-list="[scope.row.figureImg]"></image-preview>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" :label="`${name}名称`" align="center"
                                :show-overflow-tooltip="true" />
                            <el-table-column prop="address" :label="`${name}地址`" align="center"
                                :show-overflow-tooltip="true" />
                            <el-table-column label="操作" align="center" width="80">
                                <template #default="scope">
                                    <el-button link type="primary" size="small"
                                        @click="detailHandel(scope.row)">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </div>
                <div class="form-right-four">
                    <el-form-item label="发放数量" prop="number">{{ form.number }}</el-form-item>
                    <el-form-item label="领取时间" prop="getTime">
                        <div>
                            <el-radio-group v-model="form.getTime" size="large">
                                <el-radio-button disabled label="不限时" value="不限时" />
                                <el-radio-button disabled label="限时" value="限时" />
                            </el-radio-group>
                            <el-form-item prop="timeLimit" v-if="form.getTime === '限时'" style="margin-top:20px;">{{
                                form.timeLimit }}</el-form-item>
                        </div>
                    </el-form-item>
                    <el-form-item label="有效日期" prop="activeTime">
                        <div>
                            <el-radio-group v-model="form.activeTime" size="large">
                                <el-radio-button disabled label="天数" value="天数" />
                                <el-radio-button disabled label="时间段" value="时间段" />
                            </el-radio-group>
                             <el-form-item prop="timeLimit" v-if="form.activeTime === '天数'" style="margin-top:20px;">
                                <div style="display: flex;align-items: center;">
                                    <div style="margin-right:4px;">领取当日起</div>
                                    <div>{{ form.timeLimit }}</div>
                                    <div style="margin-left:4px;">天可用</div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="timeLimitRange" v-if="form.activeTime === '时间段'" style="margin-top:20px;">
                                {{ form.timeLimitRange }}
                            </el-form-item>
                        </div>
                    </el-form-item>
                    <el-form-item label="领取限制" prop="restrictions">
                        <el-radio-group v-model="form.restrictions" size="large">
                            <el-radio-button disabled label="不限量" value="不限量" />
                            <el-radio-button disabled label="限量" value="限量" />
                        </el-radio-group>
                        <el-form-item prop="restrictionsNum" v-if="form.restrictions === '限量'" style="margin-top:20px;">
                            <div style="display: flex;align-items: center;">
                                <div style="margin-right:4px;">每人限领</div>
                                <div>{{ form.restrictionsNum }}</div>
                                <div style="margin-left:4px;">张</div>
                            </div>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="是否付费(元)" prop="isPayment">
                        <el-radio-group v-model="form.isPayment" size="large">
                            <el-radio-button disabled label="否" value="否" />
                            <el-radio-button disabled label="是" value="是" />
                        </el-radio-group>
                        <el-form-item prop="money" v-if="form.isPayment === '是'" style="margin-top:20px;width:100%;">
                            <div>{{ form.money }}</div>
                        </el-form-item>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <my-tag title="核销记录" :showSortImg="false"></my-tag>
        <div style="padding:0 20px;">
            <el-form :model="recordQueryParams" ref="queryRef" :inline="true" v-show="showSearch">
                <el-form-item label="用户名称" prop="organizationName">
                    <el-input v-model="recordQueryParams.organizationName" placeholder="请输入用户名称"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="手机号" prop="canalName">
                    <el-input v-model="recordQueryParams.canalName" placeholder="请输入手机号" @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="recordLoading" :data="recordsTableData" row-key="couponId" style="width:96%;">
                <el-table-column label="ID" :show-overflow-tooltip="true" align="center" prop="couponId" />
                <el-table-column label="用户名称" :show-overflow-tooltip="true" align="center" prop="couponFrom" />
                <el-table-column label="手机号" :show-overflow-tooltip="true" align="center" prop="couponName" />
                <el-table-column label="头像" :show-overflow-tooltip="true" align="center" prop="avatarImg">
                    <template #default="scope">
                        <image-preview :width="60" :height="60" :src="scope.row.avatarImg"
                            :preview-src-list="[scope.row.avatarImg]"></image-preview>
                    </template>
                </el-table-column>
                <el-table-column label="领取时间" :show-overflow-tooltip="true" align="center" prop="contactInformation" />
                <el-table-column label="使用时间" :show-overflow-tooltip="true" align="center" prop="contactInformation" />
                <!-- <el-table-column label="优惠券来源" :show-overflow-tooltip="true" align="center" prop="contactInformation" /> -->
                <el-table-column label="核销途径" :show-overflow-tooltip="true" align="center" prop="contactInformation" />
                <el-table-column label="核销账号" :show-overflow-tooltip="true" align="center" prop="contactInformation" />
            </el-table>

            <pagination v-show="recordTotal > 0" :total="recordTotal" v-model:page="recordQueryParams.pageNum"
                v-model:limit="recordQueryParams.pageSize" @pagination="getList" />
        </div>

        <div class="platform-submit-btn">
            <el-button class="default-btn" @click="goBack">返回</el-button>
        </div>
    </div>
</template>
<script setup>
import { getImgUrl } from "@/api/decor/designer";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const recordsTableData = ref([]) // 核销记录
const showSearch = ref(true)
const recordTotal = ref(0)
const tableData = ref([]) // 优惠券渠道表格
const tableDataLoading = ref(true)
const recordLoading = ref(true)
const data = reactive({
    form: {},
    // 弹框表格搜索
    recordQueryParams: {
        pageSize: 2,
        pageNum: 1,
        names: ''
    }
});
const { form, recordQueryParams } = toRefs(data);
const name = ref('')
// 获取数据
const getList = () => {

}
// 搜索
const handleQuery = () => {
    recordQueryParams.value.pageNum = 1;
    getList();
}
// 重置
const resetQuery = () => {
    proxy.resetForm("queryRef");
    handleQuery();
}
// 优惠券详情
const detailHandel = (row) => {
    if (form.value.couponFrom === '材料商') {
        router.push('/MaterialStore/auditMaterial/' + row.id + '/detail')
    } else if (form.value.couponFrom === '机构') {
        router.push('/designAgency/auditDesignAgencyDeco/' + row.id + '/detail')
    } else {
        router.push('/materialAudit/auditMaterialAudit/' + row.materialId + '/detail')
    }
}

// 提交按钮
const goBack = () => {
    router.go(-1)
}
</script>
<style lang="scss" scoped>
.hoseType {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .hoseType-box {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .unit {
            font-family: NotoSansHans, NotoSansHans;
            font-weight: 600;
            font-size: 14px;
            color: #000000;
            line-height: 21px;
            font-style: normal;
            padding: 0 4px 0 4px;
        }
    }
}

.coverImg-style {
    width: 100%;

    ::v-deep(.el-upload-list--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
        width: 320px;
        height: 240px;
        border-radius: 8px;
        border: 1px solid #CDD4E0;
    }

}
</style>